<template>
  <!-- 户号管理 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="企业名称">
        <a-input
          v-model:value="filterForm.projectName"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="户号名称">
        <a-input
          clearable
          class="formInput"
          v-model:value="filterForm.name"
          placeholder="请输入户号名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="户号">
        <a-input
          clearable
          v-model:value="filterForm.num"
          placeholder="请输入户号"
          allow-clear
          class="formInput"
        />
      </a-form-item>
      <a-form-item label="省份">
        <a-select
          ref="select"
          v-model:value="filterForm.provId"
          class="formInput"
          placeholder="省份"
          show-search
          optionFilterProp="label"
          @change="changeProv"
          style="width: 100px"
          allow-clear
        >
          <a-select-option
            v-for="item in provList"
            :key="item.provId"
            :value="item.provId"
            :label="item.provName"
          >
            {{ item.provName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="城市">
        <a-select
          ref="select"
          v-model:value="filterForm.cityId"
          class="formInput"
          placeholder="城市"
          @change="changeCity"
          :disabled="!filterForm.provId"
          style="width: 100px"
          allow-clear
        >
          <a-select-option
            v-for="item in cityList"
            :key="item.cityId"
            :value="item.cityId"
            :label="item.cityName"
          >
            {{ item.cityName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="getCustomerList"
        >查询</a-button
      >
      <a-button v-hasPermission="'customerMsgAdd'" type="primary" class="filterBtn yellowBtn" @click="handleUser"
        >新增</a-button
      >
      <a-button
        type="primary"
        class="filterBtn greenBtn"
        :loading="importLoading"
        @click="handleCustomer"
        v-hasPermission="'customerMsgImport'"
        >导入</a-button
      >
    </a-form>
  </div>

  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmMerge(record.id)"
          >
            <template #title> 确定删除该数据? </template>
            <a-button v-hasPermission="'customerMsgDelete'" type="link">删除</a-button>
          </a-popconfirm>

          <a-button v-hasPermission="'customerMsgEdit'" type="link" @click="handleEdit(record)">编辑</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getCustomerList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <!-- 新增户号 -->
  <AddCustomer
    :addCustomerVisible="addCustomerVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    @update:addCustomerVisible="addCustomerVisible = $event"
    @getCustomerList="getCustomerList"
  />
  <!-- 导入 -->
  <CustomerModal
    :visible="customerModal"
    @update:visible="(val) => (customerModal = val)"
    @getCustomerList="getCustomerList"
  />
</template>
<script setup>

import AddCustomer from "./conpoments/AddCustomer.vue"
import CustomerModal from "./conpoments/CustomerModal.vue"
import useTableScroll from "@/hooks/useTableScroll"
const $api = inject("$api")
const filterForm = ref({
  size: 20,
  current: 1,
})
const total = ref()
const addCustomerVisible = ref(false)

const tableData = ref([])
const isEdit = ref(false)
const rowData = ref({})
const tableLoading = ref(false)
const columns = ref([
  {
    title: "企业名称",
    dataIndex: "companyName",
    key: "companyName",
    width: 200,
    align: "center",
  },
  {
    title: "户号名称",
    dataIndex: "name",
    key: "name",
    width: 200,
    align: "center",
  },
  {
    title: "用电户号",
    dataIndex: "num",
    key: "num",
    width: 150,
    align: "center",
  },
  {
    title: "省份",
    dataIndex: "provName",
    key: "provName",
    width: 120,
    align: "center",
  },
  {
    title: "城市",
    dataIndex: "cityName",
    key: "cityName",
    width: 180,
    align: "center",
  },

  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 160,
    align: "center",
    fixed: "right",
  },
])
function handleResizeColumn(w, col) {
  col.width = w
}
const handleCompany = () => {
  isEdit.value = false
  addCustomerVisible.value = true
}
const confirmDel = async (data) => {
  const res = await $api.userDel(data.id)
  if (res && res.code === 0) {
    message.success("删除成功")
    getUserList()
  }
}
const handleUser = () => {
  isEdit.value = false
  addCustomerVisible.value = true
}
const handleEdit = async (data) => {
  rowData.value = data
  isEdit.value = true
  addCustomerVisible.value = true
}

const getCustomerList = async () => {
  tableLoading.value = true
  // 过滤掉空值字段
  const params = Object.fromEntries(
    Object.entries(filterForm.value).filter(([_, value]) => {
      return value !== null && value !== undefined && value !== ""
    })
  )
  const res = await $api.elecAccManagePage(params)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}

/* const handleAccount = (data) => {
  rowData.value = data
  accountManageVisible.value = true
} */

const provList = ref([])
const cityList = ref([])
const getBaseProvinceTree = async () => {
  const res = await $api.baseProvinceTree()
  provList.value = res.data
}
const changeProv = async (id) => {
  if (id) {
    filterForm.value.cityId = null
    filterForm.value.countyId = null
    cityList.value = []
    const res = await $api.baseCityTree(id)
    cityList.value = res.data
  }
}
const handleRemark = (data) => {
  rowData.value = data
  addRemarkVisible.value = true
}
//删除
const confirmMerge = async (data) => {
  const res = await $api.deleteElecAccManage(data)
  if (res && res.code === 0) {
    message.success("删除成功")
    getCustomerList()
  } else {
    message.error(res.msg || "删除失败")
  }
}

//导入
const customerModal = ref(false)
const handleCustomer = () => {
  customerModal.value = true
}
onMounted(async () => {
  getCustomerList()
  getBaseProvinceTree()
})
const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>
